:root {
    --title-color: #606E7B;
    --subtitle-color: #AAB7C3;
    --muted-color: #DEEAF1;
    --blue-color: #2D86D4;
    --icon-width: calc(48px + 1rem);
}

:local(.detail) {
    composes: flex align-center from "style";
    composes: relative from "style";
    margin-left: var(--icon-width);
}

:local(.detailBody) {
    composes: flex-full from "style";
    max-width: 550px;
    padding-top: 20px;
    padding-bottom: 20px;
}

:local(.detailTitle) {
    composes: text-bold inline-block from "style";
    color: var(--title-color);
    font-size: 18px;
}

:local(.detailSubtitle) {
    composes: text-dark mt2 text-paragraph from "style";
    white-space: pre-wrap;
}

:local(.detailSubtitleLight) {
    composes: mt2 text-paragraph from "style";
    color: var(--subtitle-color);
}

:local(.detailTextarea) {
    composes: text-dark input p2 from "style";
    resize: none;
    font-size: 16px;
    width: 100%;
    min-height: 100px;
}
